<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>书签</title>
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"> <!-- Font Awesome CSS -->
    <link rel="stylesheet" type="text/css" href="assets/mycloud.css"/>
    <link rel="stylesheet" type="text/css" href="assets/iconfont (7)/iconfont.css"/>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body>
        <div class="container">
            <div class="head">
                <div>夸克网盘</div>
                <div class="ch">
                    <i class="i iconoir:pc-check"></i>
                    <i class="i material-symbols:close" onclick="location.href='my.html'"></i>
                </div>
            </div>

            <div class="search-container">
                <input type="text" id="search" name="q" placeholder="搜索网盘文件">
                <div class="icon-container">
                    <i class="i material-symbols:search"></i>
                </div>
            </div>

            <div class="information">
                <div class="up">
                    <div class="first">
                        <img src="img/托帕1.jpg">
                        <div>
                            <div class="name">曹博源</div>
                            <div class="tips">开通svip享云收藏</div>
                        </div>
                    </div>
                    <div class="second">
                        <div class="progress">
                            <div class="progress-bar" style="width: 39%;"></div> <!-- 进度条，这里设置静态宽度 -->
                            <div class="char">
                                <div class="p-l">已用空间 4.1G/10G</div>
                                <div class="p-r">立即扩容</div>
                            </div>
                        </div>
                        <div class="s-r">每天领空间</div>
                    </div>
                </div>
            </div>

            <div class="down">
                <div class="equip">
                    <img src="img/视频.jpg">
                    <div>视频</div>
                </div>
                <div class="equip">
                    <img src="img/相册.jpg">
                    <div>相册</div>
                </div>
                <div class="equip">
                    <img src="img/文档.jpg">
                    <div>文档</div>
                </div>
                <div class="equip">
                    <img src="img/音频.jpg">
                    <div>音频</div>
                </div>
                <div class="equip">
                    <img src="img/压缩包.jpg">
                    <div>压缩包</div>
                </div>
            </div>

            <div class="another">
                <div class="fl">
                    <div class="ability">
                        <i class="i ic:round-cloud-queue"></i>
                        <div>云收藏</div>
                    </div>
                    <div class="ability">
                        <i class="i material-symbols:lock-sharp"></i>
                        <div>加密</div>
                    </div>
                    <div class="ability">
                        <i class="i material-symbols:picture-as-pdf-outline"></i>
                        <div>PDF转换</div>
                    </div>
                </div>
                <div class="sl">
                    <div class="ability">
                        <i class="i mdi:trash-can-outline"></i>
                        <div>回收站</div>
                    </div>
                    <div class="ability">
                        <i class="i mdi:microphone"></i>
                        <div>AI听记</div>
                    </div>
                    <div class="ability">
                        <i class="i material-symbols:chat-info-outline-sharp"></i>
                        <div>群组</div>
                    </div>
                </div>
            </div>

            <div class="translation">
                <div class="trans-head">
                    <div class="t-h-l">转存的内容</div>
                    <div class="t-h-r">
                        <i class="i material-symbols:eye-tracking"></i>
                        <i class="i material-symbols:arrow-forward-ios-rounded"></i>
                    </div>
                </div>
                <div class="trans-con">
                    <div class="deta">
                        <div class="d-l">
                            <img src="img/文件.jpg">
                            <div class="wenzi">
                                <div class="wenzi-u">植物大战僵尸杂交版v.2.0.88</div>
                                <div class="wenzi-d">05-19 12:07 转存 位置·来自：分享</div>
                            </div>
                        </div>
                        <div class="d-r">去查看</div>
                    </div>
                </div>

                <div class="trans-con">
                    <div class="deta">
                        <div class="d-l">
                            <img src="img/文件.jpg">
                            <div class="wenzi">
                                <div class="wenzi-u">植物大战僵尸杂交版v.2.0.88</div>
                                <div class="wenzi-d">05-19 12:07 转存 位置·来自：分享</div>
                            </div>
                        </div>
                        <div class="d-r">去查看</div>
                    </div>
                </div>

                <div class="trans-con">
                    <div class="deta">
                        <div class="d-l">
                            <img src="img/文件.jpg">
                            <div class="wenzi">
                                <div class="wenzi-u">植物大战僵尸杂交版v.2.0.88</div>
                                <div class="wenzi-d">05-19 12:07 转存 位置·来自：分享</div>
                            </div>
                        </div>
                        <div class="d-r">去查看</div>
                    </div>
                </div>
            </div>

            <div class="near">
                <div class="trans-head">
                    <div class="t-h-l">最近文件</div>
                    <div class="t-h-r">
                        <i class="i material-symbols:eye-tracking"></i>
                        <i class="i material-symbols:arrow-forward-ios-rounded"></i>
                    </div>
                </div>
            </div>

            <div class="photo">
                <div class="trans-head">
                    <div class="t-h-l">相册时光机</div>
                    <div class="t-h-r">
                        <i class="i material-symbols:eye-tracking"></i>
                        <i class="i material-symbols:arrow-forward-ios-rounded"></i>
                    </div>
                </div>
            </div>
            <div class="photo">
                <div class="trans-head">
                    <div class="t-h-l">相册时光机</div>
                    <div class="t-h-r">
                        <i class="i material-symbols:eye-tracking"></i>
                        <i class="i material-symbols:arrow-forward-ios-rounded"></i>
                    </div>
                </div>
            </div>

            <div class="foot">
                <div class="one">
                    <i class="i material-symbols-light:home-rounded"></i>
                    <div>首页</div>
                </div>
                <div class="one">
                    <i class="i material-symbols:folder-open-outline"></i>
                    <div>文件</div>
                </div>
                <div class="one">
                    <i class="i gg:arrows-exchange-alt-v"></i>
                    <div>传输</div>
                </div>
                <div class="one">
                    <i class="i ic:round-cloud-queue"></i>
                    <div>会员</div>
                </div>
            </div>
        </div>
</body>
</html>